<template>
    <div id="toroidal" ></div>
</template>
<script>
export default{
    mounted() {
        let myChart = this.$echarts.init(document.getElementById('toroidal'))
        let name = ['1个月','3个月','6个月','一年以上']
        myChart.setOption({
        
            tooltip:{
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                name: name,
                type: 'pie',
                radius:['40%','60%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data:[
                    {value: 335, name: '1个月'},
                    {value: 310, name: '3个月'},
                    {value: 234, name: '6个月'},
                    {value: 135, name: '一年以上'}
                ],
                color:['red','#87CEFA','black','yellow']
                }
            ]
        })
    },
}
</script>
<style></style>